<script setup lang="ts">
import { saveOrUpdateCourse } from '@/api/courses'
import { EditPen, Tools, Picture, Clock, Document } from '@element-plus/icons-vue'
import ImageUpload from './ImageUpload.vue'
import TextEditor from './TextEditor.vue'
import router from '@/router'
const currentStep = ref(0)
const course = ref({
  courseName: '',
  brief: '',
  teacherDTO: {
    id: 0,
    courseId: 0,
    teacherName: '',
    teacherHeadPicUrl: '',
    position: '',
    description: ''
  },
  previewFirstField: '',
  previewSecondField: '',
  sortNum: 0,
  // 销售信息
  discounts: 0,
  price: 0,
  sales: 0,
  discountsTag: '',
  // 课程图片
  courseListImg: '',
  courseImgUrl: '',
  // 秒杀活动
  activityCourse: true,
  activityCourseDTO: {
    beginTime: '',
    endTime: '',
    amount: 0,
    stock: 0
  },
  // 课程详情
  courseDescriptionMarkDown: '课程详情信息',
  status: 1
})
// 秒杀活动时间段['time1', 'time2']，编辑数据时，在数据加载也需要对应处理为
const timeRange = ref([] as any)
watch(timeRange, (newTime) => {
  if (Array.isArray(newTime)) {
    course.value.activityCourseDTO.beginTime = newTime[0]
    course.value.activityCourseDTO.endTime = newTime[1]
  } else {
    course.value.activityCourseDTO.beginTime = ''
    course.value.activityCourseDTO.endTime = ''
  }
})
// 表单提交
const onSubmit = async () => {
  const { data } = await saveOrUpdateCourse(course.value)
  if (data.code === '000000') {
    ElMessage.success('课程保存成功')
    router.push({ name: 'course' })
  } else {
    ElMessage.error('课程保存失败')
    throw new Error('课程保存失败,' + data.mesg)
  }
}
// 秒杀活动状态切换 编辑时 当null 变为true时，子数据
const activityChange = (newVal: any) => {
  if (newVal && course.value.activityCourseDTO === null) {
    course.value.activityCourseDTO = {
      beginTime: '',
      endTime: '',
      amount: 0,
      stock: 0
    }
  }
}
</script>

<template>
  <div>
    <el-page-header @back="$router.go(-1)">
      <template #content>
        <div class="flex items-center">
          <span class="text-large font-600 mr-3"> 新增/编辑课程 </span>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button type="primary" class="ml-2" @click="onSubmit">保存</el-button>
        </div>
      </template>

      <el-card class="box-card">
        <template #header>
          <el-steps :space="200" :active="currentStep" simple>
            <el-step title="基本信息" :icon="EditPen" @click="currentStep = 0" />
            <el-step title="课程封面" :icon="Picture" @click="currentStep = 1" />
            <el-step title="销售信息" :icon="Tools" @click="currentStep = 2" />
            <el-step title="秒杀活动" :icon="Clock" @click="currentStep = 3" />
            <el-step title="课程详情" :icon="Document" @click="currentStep = 4" />
          </el-steps>
        </template>
        <el-form :model="course" ref="form" label-width="80px" :inline="false" size="large">
          <div v-show="currentStep === 0">
            <el-form-item label="课程名称">
              <el-input v-model="course.courseName" maxlength="100" show-word-limit clearable></el-input>
            </el-form-item>
            <el-form-item label="简介">
              <el-input v-model="course.brief" clearable></el-input>
            </el-form-item>
            <el-form-item label="教师姓名">
              <el-input v-model="course.teacherDTO.teacherName" clearable></el-input>
            </el-form-item>
            <el-form-item label="教师简介">
              <el-input v-model="course.teacherDTO.description" clearable></el-input>
            </el-form-item>
            <el-form-item label="课程概述">
              <el-input v-model="course.previewFirstField" style="flex: 1; margin-right: 20px" clearable></el-input>
              <el-input v-model="course.previewSecondField" style="flex: 1" clearable></el-input>
            </el-form-item>
            <el-form-item label="课程排序">
              <el-input-number v-model="course.sortNum" :min="0" controls-position="right"></el-input-number>
            </el-form-item>
          </div>
          <!-- 课程封面 -->
          <div v-show="currentStep === 1">
            <el-form-item label="展示图片">
              <ImageUpload v-model="course.courseListImg" />
            </el-form-item>
            <el-form-item label="解锁图片">
              <ImageUpload v-model="course.courseImgUrl" />
            </el-form-item>
          </div>
          <!-- 销售信息 -->
          <div v-show="currentStep === 2">
            <el-form-item label="售卖价格">
              <el-input-number controls-position="right" v-model="course.discounts" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="商品原价">
              <el-input-number controls-position="right" v-model="course.price" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="销量">
              <el-input-number controls-position="right" v-model="course.sales" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="活动标签"> <el-input v-model="course.discountsTag" size="large" clearable></el-input> </el-form-item>
          </div>
          <!-- 秒杀活动 -->
          <div v-show="currentStep === 3">
            <el-form-item label="限时秒杀">
              <el-switch
                v-model="course.activityCourse"
                :active-value="true"
                :inactive-value="false"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                @change="activityChange"
              />
            </el-form-item>
            <el-form-item label="活动时间" style="width: 800px">
              <el-date-picker
                v-model="timeRange"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
            <el-form-item label="活动价格">
              <el-input-number controls-position="right" v-model="course.activityCourseDTO.amount" :min="0" />
            </el-form-item>
            <el-form-item label="库存数">
              <el-input-number controls-position="right" v-model="course.activityCourseDTO.stock" :min="0" />
            </el-form-item>
          </div>
          <!-- 课程详情 -->
          <div v-show="currentStep === 4">
            <el-form-item label="课程详情">
              <TextEditor v-model="course.courseDescriptionMarkDown" />
            </el-form-item>
            <el-form-item label="是否上架">
              <el-switch
                v-model="course.status"
                class="ml-2"
                :active-value="1"
                :inactive-value="0"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              />
            </el-form-item>
          </div>
          <div class="form-bottom-btn">
            <el-button @click="currentStep--" v-show="currentStep > 0">上一步</el-button>
            <el-button @click="currentStep++" v-show="currentStep < 4">下一步</el-button>
            <el-button v-show="currentStep === 4" type="primary" @click="onSubmit">保存</el-button>
          </div>
        </el-form>
      </el-card>
    </el-page-header>
  </div>
</template>

<style lang="scss" scoped>
.el-step {
  cursor: pointer;
}
.el-form {
  padding: 0 90px 0 10px;
}
.form-bottom-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
